<template>
  <div class="wrapper">
    <!-- header部分 -->
    <div class="head">
      <div class="head_left">
      <el-icon @click="back"><ArrowLeftBold /></el-icon>
    </div>
      <div class="head_right">
      <p>地址管理</p>
    </div>
    </div>
    <!-- 地址列表部分 -->
    <ul class="addresslist">
      <li v-for="item in data.addressList" :key="item.daId">
        <div class="addresslist-left" @click="setDeliveryAddress(item)">
          <h3>{{ item.contactName }}{{ data.sex}} {{ item.contactTel }}</h3>
          <p>{{ item.address }}</p>
        </div>
        <div class="addresslist-right">
          <i class="fa fa-edit" @click="editUserAddress(item.daId)"></i>
          <i class="fa fa-remove" @click="removeUserAddress(item.daId)"></i>
        </div>
      </li>
    </ul>
    <!-- 新增地址部分 -->
    <div class="addbtn" @click="data.formVisible = true">
      <p>新增收货地址</p>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>


<!--  表格-->
  <el-dialog v-model="data.formVisible" title="新增地址" width="80vw" destroy-on-close>
    <el-form ref="formRef" :rules="data.rules"  :model="data.form"  :label-width="'10vw'" style="padding-right: 5vw;padding-top: 2vw">
      <el-form-item label="联系人姓名"  prop="contactName" label-position="top"  style="margin-top: -3vw">
        <el-input v-model="data.form.contactName" autocomplete="off" placeholder="请输入姓名"/>
      </el-form-item>
      <el-form-item label="联系人性别" label-position="top"  >
                <el-radio-group v-model="data.form.contactSex">
                <el-radio value="1" label="男" style="margin-top: -3vw"></el-radio>
                <el-radio value="0" label="女" style="margin-top: -3vw"></el-radio>
                </el-radio-group>
              </el-form-item>
      <el-form-item label="联系人电话" prop="contactTel" label-position="top"  style="margin-top: -3vw">
        <el-input v-model="data.form.contactTel" autocomplete="off"  placeholder="请输入电话"/>
      </el-form-item>
      <el-form-item label="送货地址" prop="address" label-position="top" >
        <el-input :rows = "3" type="textarea" v-model="data.form.address" autocomplete="off" placeholder="请输入送货地址"/>
      </el-form-item>
      <el-form-item label="	所属用户编号"  label-position="top" >
        <el-input v-model="data.userId" autocomplete="off" :disabled="true" />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button @click="add">保存</el-button>
      </div>
    </template>
  </el-dialog>




</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import Footer from '../components/Footer.vue';
import request from "@/utils/request.js";
import {ArrowLeftBold} from "@element-plus/icons-vue";
import { useRoute } from 'vue-router';
import router from "@/router";

const data = reactive({
  form:{},
  addressList:{},
  userId:JSON.parse(localStorage.getItem('userId')),
  user:JSON.parse(localStorage.getItem('user')),
  sex:1,
  businessId:0,
  formVisible:false,
  rules: {
    contactName: [
      {required: true, message: '请输入姓名', trigger: 'blur'}
    ],
    contactTel: [
      {required: true, message: '请输入电话', trigger: 'blur'}
    ],
    address: [
      {required: true, message: '请输入送货地址', trigger: 'blur'}
    ],
  }
})

const formRef = ref()

// 获取前面的商家id
const route = useRoute();
data.businessId = route.query.businessId;

onMounted(() => {
  listDeliveryAddressByUserId();
  sexFilter(data.user.userSex)
});
// 根据用户id获取地址
const listDeliveryAddressByUserId = () => {
 request.get('/DeliveryAddress/listDeliveryAddressByUserId', {
   params:{
     userId: data.userId
   }
  }).then(res => {
    data.addressList = res.data
  }).catch(error => {
    console.error(error);
  });
};

const sexFilter = (value) => {
  if (value === "1"){
    data.sex = '先生'
  }else {
    data.sex = '女士'
  }
};

const add =() =>{

  formRef.value.validate((valid)=>{
    if(valid){
      const address = {
        contactName:data.form.contactName,
        contactSex:data.form.contactSex,
        userId:data.userId,
        address:data.form.address,
        contactTel:data.form.contactTel
      }
      request.post("/DeliveryAddress/saveDeliveryAddress",address).then(res=>{  //新增对象无id
        if(res.code === 1){
          data.formVisible =false
          ElMessage.success("操作成功")
          listDeliveryAddressByUserId();
          load() //加载最新数据
        }else{
          ElMessage.error(res.msg)

        }
      })
    }
  })
}

const back =()=>{
  router.push({
    path: '/order',
    query: {
      businessId: data.businessId
    }
  });
}

const handleCancel = () => {
  // 关闭对话框
  data.formVisible = false;
  // 重置表单数据
  data.form = {}

};


</script>
<style scoped>
/*************** 总容器 ***************/
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #F5F5F5;
}
/*顶部*/
.wrapper .head {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  /*保证在最上层*/
  z-index: 1000;
}

.wrapper .head .head_left{
  flex: 3;
  margin-left: 4vw;
  margin-top: 1vw;
}
.wrapper .head .head_right{
  flex: 6;
  margin-left: 2vw;
  font-size: 6vw;
}
/*************** addresslist ***************/
.wrapper .addresslist {
  width: 100%;
  margin-top: 12vw;
  background-color: #fff;
}
.wrapper .addresslist li {
  width: 100%;
  box-sizing: border-box;
  border-bottom: solid 1px #DDD;
  padding: 3vw;
  display: flex;
}
.wrapper .addresslist li .addresslist-left {
  flex: 5;
  /*左边这块区域是可以点击的*/
  user-select: none;
  cursor: pointer;
}
.wrapper .addresslist li .addresslist-left h3 {
  font-size: 4.6vw;
  font-weight: 300;
  color: #666;
}
.wrapper .addresslist li .addresslist-left p {
  font-size: 4vw;
  color: #666;
}
.wrapper .addresslist li .addresslist-right {
  flex: 1;
  font-size: 5.6vw;
  color: #999;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/*************** 新增地址部分 ***************/
.wrapper .addbtn {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  border-bottom: solid 1px #DDD;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4.5vw;
  color: #0097FF;
  user-select: none;
  cursor: pointer;
}
.wrapper .addbtn p {
  margin-left: 2vw;
}
</style>